<template>
  <div class="card-container" v-if="lxPoolStatistics">
    <DatePicker
      class="mb-2"
      v-model:value="dateLxPool"
      format="YYYY-MM-DD"
      value-format="YYYYMM"
      picker="month"
      @change="changeLxPoolDate"
    />
    <Table
      :scroll="{ x: 500, y: 500 }"
      :dataSource="lxPoolStatistics"
      :columns="columns"
      :pagination="false"
    ></Table>
  </div>
</template>
<script setup lang="tsx">
import { computed } from 'vue';
import { DatePicker, Table } from 'ant-design-vue';
import { ProTable, ProTableProps } from '@/components/ProTable/index';
import { columnWidth } from '@/utils/utils';
import { getLxPoolStatistics } from '@/api/device';

const dateLxPool = defineModel('dateLxPool');

const lxPoolStatistics = defineModel<any>('lxPoolStatistics');
const columns = computed<ProTableProps['columns']>(() => [
  {
    title: '运营商',
    dataIndex: 'carrier',
    align: 'center',
    width: columnWidth('carrier', lxPoolStatistics.value, '运营商'),
  },
  {
    title: '计费组代码',
    dataIndex: 'bg_code',
    align: 'center',
    width: columnWidth('bg_code', lxPoolStatistics.value, '计费组代码'),
  },
  {
    title: '套餐名称',
    dataIndex: 'name',
    align: 'center',
    width: columnWidth('name', lxPoolStatistics.value, '套餐名称'),
  },
  {
    title: '套餐大小',
    dataIndex: 'data_plan',
    align: 'center',
    width: columnWidth('data_plan', lxPoolStatistics.value, '套餐大小'),
  },
  {
    title: '总卡数',
    dataIndex: 'total_card_count',
    align: 'center',
    width: columnWidth('total_card_count', lxPoolStatistics.value, '总卡数'),
  },
  {
    title: '激活卡数',
    dataIndex: 'active_card_count',
    align: 'center',
    width: columnWidth('active_card_count', lxPoolStatistics.value, '激活卡数'),
  },
  {
    title: '总流量',
    dataIndex: 'pool_size',
    align: 'center',
    width: columnWidth('pool_size', lxPoolStatistics.value, '总流量'),
  },
  {
    title: '激活卡已用流量',
    dataIndex: 'data_usage',
    align: 'center',
    width: columnWidth('data_usage', lxPoolStatistics.value, '激活卡已用流量'),
  },
  {
    title: '语音池大小',
    dataIndex: 'voice_pool_size',
    align: 'center',
    width: columnWidth('voice_pool_size', lxPoolStatistics.value, '语音池大小'),
  },
  {
    title: '付费语音用量',
    dataIndex: 'voice_usage',
    align: 'center',
    width: columnWidth('voice_usage', lxPoolStatistics.value, '付费语音用量'),
  },
  {
    title: '流量模式',
    dataIndex: 'billing_mode',
    align: 'center',
    width: columnWidth('billing_mode', lxPoolStatistics.value, '流量模式'),
    customRender({ text }) {
      return text == '0' ? '单卡' : '共享';
    },
  },
  {
    title: '语音模式',
    dataIndex: 'voice_billing_mode',
    align: 'center',
    width: columnWidth(
      'voice_billing_mode',
      lxPoolStatistics.value,
      '语音模式',
    ),
    customRender({ text }) {
      return text == '0' ? '单卡' : '共享';
    },
  },
]);
console.log(lxPoolStatistics.value, 'lxPoolStatistics');
const emit = defineEmits(['update:lxPoolStatistics']);
const changeLxPoolDate = async (val: any) => {
  const res: any = await getLxPoolStatistics({ date: val });
  emit('update:lxPoolStatistics', res.data.data.rows);
};
</script>
